<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button type="button" v-on:click="counter++">+</button>
			<span>{{counter}}</span>
			<button type="button" @click="sub">-</button>
			<button type="button" @click="t1">另一种写法</button>
			<button type="button" @click="t2(counter)">传一个变量</button>
			<button type="button" @click="t3(counter, $event)">传一个变量且带有原生事件</button>
			<button type="button" @click="t4(counter)">传一个变量,直接使用$event获取原生事件。错误演示</button>
			<div @click="t2(counter)">
				<button type="button" @click="t1">t1方法，不会阻止事件传播，所以div会被点击</button>
			</div>
			<div @click="t2(counter)">
				<button type="button" @click.stop="t1">t1方法，阻止事件传播</button>
			</div>
			<form >
				<input type="text" name="account" v-on:keyup.enter.prevent="onSubmit" />
				<button type="submit">提交</button>
			</form>
		</div>
		<form>
			<input type="text" name="account" />
			<!-- 原生JS阻止表单提交， return jssm()必须如此-->
			<button type="button" onclick="return jssm()">提交</button>
		</form>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function jssm() {
				console.log("JS原生提交表单");
				return false;
			}
			let app = new Vue({
				el: "#app",
				data: {
					message: "你好，Vue",
					counter: 1
				},
				methods: {
					sub: function(e) {
						if (this.counter > 0) {
							this.counter--;
						}
						if (e) {
							//e.target.tagName获取当前触发事件的Dom元素名称
							console.log(e.target.tagName)
						}
					},
					t1(e) {
						console.log(e.target.tagName)
					},
					t2(msg) {
						console.log(msg)
					},
					t3(msg, e) {
						console.log(msg)
						console.log(e.target.tagName)
					},
					t4(msg) {
						console.log(msg)
						// console.log(this.$event.target.tagName)//错误
					},
					onSubmit() {
						console.log("onSubmit")
					}
				}
			})
		</script>
	</body>
</html>